<template>
    <div class="container">
        <div class="title">
            <el-text>参数设置</el-text> <el-button type="warning" size="small" @click="openTheCabinet">开柜机门</el-button>
        </div>
        <div class="content">
            <el-tabs
                v-model="activeName"
                @tab-change="clickTab"
            >
                <el-tab-pane v-for="(item, index) in c_cabinet_num" :label="'设备' + (index + 1)" :name="'equipment_' + (index + 1)">
                    <el-button type="danger" size="small">启动所有货道</el-button>
                    <el-button type="primary" plain size="small">查看二维码</el-button>
                    <el-button type="primary" plain size="small">查看借RFID</el-button>
                    <el-button type="primary" plain size="small">查看还RFICD</el-button>
                    <TableCustom :columns="columns" :tableData="allData['tableData' + (index + 1)]" :hasPagination="false" tableHeight="500px">
                        <template #p_glasses_type="{rows}">
                            <el-select v-model="rows.p_glasses_type">
                                <el-option value="儿童款">儿童款</el-option>
                                <el-option value="成人款">成人款</el-option>
                                <el-option value="挂夹款">挂夹款</el-option>
                            </el-select>
                        </template>
                        <template #p_existing_number="{rows}">
                            <el-input-number v-model="rows.p_existing_number" />
                        </template>
                        <template #p_max_number="{rows}">
                            <el-input-number v-model="rows.p_max_number" />
                        </template>
                        <template #p_freight_lane="{rows}">
                            <el-input v-model="rows.p_freight_lane" />
                        </template>
                        <template #operator="{rows}">
                            <el-button :icon="Unlock" type="danger"  @click="openDoor(rows)">开锁</el-button>
                        </template>
                        
                    </TableCustom>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="optaionBtns">
            <el-button type="danger" @click="$router.go(-1)">返回</el-button>
            <el-button type="success" @click="saveParams" :loading="loadingState.$state.loading">保存参数</el-button>
        </div>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-CabinetPrmSet">
import { useRouter } from 'vue-router'
import {query_equipment_params, update_equipment_params, do_open_door, do_equipment_open_door} from '@/api'
import { Unlock } from '@element-plus/icons-vue';
import {ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import TableCustom from '@/components/table-custom.vue';
import { fatchDataState } from '../../store/fetchData';

const loadingState = fatchDataState()
const allData = ref({})

// 表格相关
let columns = ref([
    { prop: 'p_group_code', label: '分组编码' },
    { prop: 'p_layer_code', label: '层编码' },
    { prop: 'p_glasses_type', label: '眼镜分类' },
    { prop: 'p_freight_lane', label: '控制指令' },
    { prop: 'p_existing_number', label: '现有眼镜数（个）'},
    { prop: 'p_max_number', label: '最大眼镜数（个）' },
    { prop: 'operator', label: '操作', width: 100 },
])
const tableData = ref([]);
const tableData2 = ref([]);

const activeName = ref('equipment_1')

const router = useRouter();
const params = router.currentRoute.value.query

const openTheCabinet = () => {
    ElMessageBox.confirm(
    '确定要打开机柜门?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(res => {
        do_equipment_open_door({c_code: params.p_c_code}).then(res => {
            if(res.code === '1000' && res.data) {
                ElMessage({
                    type: 'success',
                    message: '开门成功',
                })
            }
        })
    })
    
}
const openDoor = (data) => {
    do_open_door({p_id: data.p_id}).then(res => {
        if (res.code == '1000') {
            ElMessage({
                type: 'success',
                message: '开锁成功',
            })
       }
    })
}

const saveParams = () => {
    loadingState.handleChangeState(true)

    let arr = []
    for(let i in allData.value) {
        // console.log(allData.value[i])
        arr = [...allData.value[i], ...arr]
    }
    update_equipment_params({params_list: [...arr]}).then(res=> {
       if (res.code == '1000') {
        ElMessage({
            type: 'success',
            message: '修改成功',
        })
       }
    })
}

const queryData = (params) => {
    query_equipment_params(params).then(res => {
        if(res.code == '1000') {
            allData.value['tableData' + params.p_group_code ] = res.data;
            console.log(allData.value)
            if (res.data.length == 0) {
                for(let i = 0; i< 40; i++) {
                    allData.value['tableData' + params.p_group_code ].push({
                        "p_c_code": params.p_c_code,
                        "p_existing_number": 0,
                        "p_freight_lane": 0,
                        "p_glasses_type": "儿童款",
                        "p_group_code": 0,
                        "p_id": 707,
                        "p_layer_code": 0
                    })
                }
            }
        } 
    })
}


const c_cabinet_num = ref([])
c_cabinet_num.value.length = Number(params.c_cabinet_num)
for(let i = 0; i < Number(params.c_cabinet_num); i++) {
    allData.value['tableData' + (i + 1)] = []
}
queryData({p_c_code:  params.p_c_code, p_group_code: 1})
const clickTab = () => {
    let num = activeName.value.match(/\d+/g)[0]
    if ( allData.value['tableData' + num ].length == 0) {
        queryData({p_c_code:  params.p_c_code, p_group_code: num})
    }
    
}
</script>

<style>
    .container {
        position: relative;
    }
    .optaionBtns { 
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #eee;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        align-self: center;
        box-sizing: border-box;
        padding: 0 40px;
    }
</style>